@mixin border {
    border: 1px solid red;
}

@mixin tra( $pro:all, $dur:1s, $delay:1s, $tim:linear) {
    -webkit-transition: $pro $dur $delay $tim;
    -moz-transition: $pro $dur $delay $tim;
    -ms-transition: $pro $dur $delay $tim;
    -o-transition: $pro $dur $delay $tim;
    transition: $pro $dur $delay $tim;
}

.box {
    @include border;
}

.box1 {
    @include border();
}

.box2 {
    @include tra(all, 1s, 2s, linear);
}

.box3 {
    @include tra;
}

.box4 {
    background: grayscale(#4234c2);
    color: lighten(#424242, 70);
}

.vip {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: url() no-repeat;
}

@for $i from 1 through 9 {
    .vip#{$i} {
        @extend .vip;
        background-position: $i*30px 0;
    }
}